<!--  -->
<template>
    <div class="box">
        <div class="top">
            <p class="title">未来30天游客量趋势图</p>
            <p class="bg"></p>
        </div>
        <div class="charts" ref="charts"></div>

    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue"
import * as echarts from "echarts"

const charts = ref<any>()

onMounted(() => {
    let mycharts = echarts.init(charts.value)
    mycharts.setOption({
        // color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['Line 1']
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: ['09/05', '09/07', '09/09', '09/11', '09/13', '09/15', '09/17', '09/19', '09/21', '09/23', '09/25', '09/27', '09/29', '10/01', '10/03']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: 'Line 1',
                type: 'line',
                stack: 'Total',
                smooth: true,
                lineStyle: {
                    width: 0
                },
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: '#856D3D'
                        },
                        {
                            offset: 1,
                            color: '#222451'
                        }
                    ])
                },
                emphasis: {
                    focus: 'series'
                },
                data: [1849,7851,10951,18583, 5304, 18306,2958, 8508,17497,2390, 19379,6234, 8448,9761, 5980,3250,18676,11360,18839,6792,1666,4737,11766,17367,12472,3930,676,19292,10675,16396]
            },
            // {
            //     name: 'Line 2',
            //     type: 'line',
            //     stack: 'Total',
            //     smooth: true,
            //     lineStyle: {
            //         width: 0
            //     },
            //     showSymbol: false,
            //     areaStyle: {
            //         opacity: 0.8,
            //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //             {
            //                 offset: 0,
            //                 color: 'rgb(0, 221, 255)'
            //             },
            //             {
            //                 offset: 1,
            //                 color: 'rgb(77, 119, 255)'
            //             }
            //         ])
            //     },
            //     emphasis: {
            //         focus: 'series'
            //     },
            //     data: [120, 282, 111, 234, 220, 340, 310]
            // },
            // {
            //     name: 'Line 3',
            //     type: 'line',
            //     stack: 'Total',
            //     smooth: true,
            //     lineStyle: {
            //         width: 0
            //     },
            //     showSymbol: false,
            //     areaStyle: {
            //         opacity: 0.8,
            //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //             {
            //                 offset: 0,
            //                 color: 'rgb(55, 162, 255)'
            //             },
            //             {
            //                 offset: 1,
            //                 color: 'rgb(116, 21, 219)'
            //             }
            //         ])
            //     },
            //     emphasis: {
            //         focus: 'series'
            //     },
            //     data: [320, 132, 201, 334, 190, 130, 220]
            // },
            // {
            //     name: 'Line 4',
            //     type: 'line',
            //     stack: 'Total',
            //     smooth: true,
            //     lineStyle: {
            //         width: 0
            //     },
            //     showSymbol: false,
            //     areaStyle: {
            //         opacity: 0.8,
            //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //             {
            //                 offset: 0,
            //                 color: 'rgb(255, 0, 135)'
            //             },
            //             {
            //                 offset: 1,
            //                 color: 'rgb(135, 0, 157)'
            //             }
            //         ])
            //     },
            //     emphasis: {
            //         focus: 'series'
            //     },
            //     data: [220, 402, 231, 134, 190, 230, 120]
            // },
            // {
            //     name: 'Line 5',
            //     type: 'line',
            //     stack: 'Total',
            //     smooth: true,
            //     lineStyle: {
            //         width: 0
            //     },
            //     showSymbol: false,
            //     label: {
            //         show: true,
            //         position: 'top'
            //     },
            //     areaStyle: {
            //         opacity: 0.8,
            //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //             {
            //                 offset: 0,
            //                 color: 'rgb(255, 191, 0)'
            //             },
            //             {
            //                 offset: 1,
            //                 color: 'rgb(224, 62, 76)'
            //             }
            //         ])
            //     },
            //     emphasis: {
            //         focus: 'series'
            //     },
            //     data: [220, 302, 181, 234, 210, 290, 150]
            // }
        ]


    })
})

</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    height: 100%;
    background: url(../../images/dataScreen-main-cb.png) no-repeat;
    background-size: 100% 100%;

    .top {
        .title {
            color: #ffffff;
            font-size: 16px;
            font-style: italic;

        }

        .bg {
            width: 68px;
            height: 7px;
            margin-top: 10px;
            background: url(../../images/dataScreen-title.png) no-repeat;
            background-size: 100% 100%;
        }
    }

    .charts {
        width: 100%;
        height: 220px;

        margin-top: 20px;
    }
}
</style>